<template>
  <!-- 申请 -->
  <div class="apply-form">
    <div class="w1160">
      <h1 class="title fz30">入驻申请</h1>
      <div class="input-list">
        <el-form
          ref="refApplyForm"
          style="max-width: 600px"
          :model="fromData"
          status-icon
          :rules="rules"
          label-width="0"
          class="demo-fromData"
          label-position="left"
        >
          <el-form-item prop="name">
            <el-input v-model="fromData.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item prop="phone">
            <el-input v-model="fromData.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="resource">
            <el-input v-model="fromData.resource" placeholder="请输入要供应的资源" />
          </el-form-item>
          <el-form-item>
            <el-button
              round
              size="large"
              type="primary"
              style="width: 150px"
              :loading="loading"
              @click="submitForm"
            >
              提交信息
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { apply } from '@/api/apply'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const refApplyForm = ref(null)
const loading = ref(false)
// 验证手机号
const validatePhone = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入有效的手机号'))
  } else {
    callback()
  }
}
const fromData = ref({
  name: '',
  phone: '',
  resource: ''
})
const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur', validator: validatePhone }],
  resource: [{ required: true, message: '请输入要供应的资源', trigger: 'blur' }]
}
const submitForm = async () => {
  await refApplyForm.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const res = await apply(fromData.value)
        console.log(res)
        if (res.code === 20000) {
          ElMessage({
            message: '申请成功，请等待审核',
            type: 'success'
          })
          loading.value = false
          refApplyForm.value.resetFields() //重置表单
        }
      } catch (error) {
        ElMessage({
          message: '申请失败，请稍后再试',
          type: 'error'
        })
        loading.value = false
        console.log(error)
      }
    } else {
      console.log('error submit form')
    }
  })
}
</script>

<style lang="scss" scoped>
.apply-form {
  padding-top: 65px;
  height: 515px;
  background: url('@/assets/img/apply-bg.png') no-repeat center/cover;
  h1 {
    position: relative;
    margin-bottom: 45px;
    padding-left: 25px;
    line-height: 36px;
    color: #333;
    &::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 10px;
      width: 2px;
      height: 40px;
      background: #22a4f1;
    }
  }
  .input-list {
    width: 500px;
    &:deep(.el-input__inner) {
      height: 60px;
      line-height: 60px;
    }
  }
}
</style>
